import React, { useRef, useEffect, useState } from 'react'
import { Space, Button, Input, Select, Table, DatePicker, TimePicker, Image, Radio } from 'antd';
import { BarChartOutlined } from "@ant-design/icons"
import * as echarts from 'echarts';
import charts from "../../icon/图表.png"
const columnsCity = [
  {
    title: '地市',
    dataIndex: 'city',
    key: 'city',
    align: "center",
    fixed: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '统计时间',
    dataIndex: 'statisticalTime',
    key: 'statisticalTime',
    align: "center",
    fixed: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '边设备类型',
    dataIndex: 'edgeDevType',
    key: 'edgeDevType',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: <span>物联网体系建设  <br></br>应用率</span>,
    dataIndex: 'applicationRate',
    key: 'applicationRate ',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: "边设备未调试数",
    dataIndex: 'noDebugNum',
    key: 'noDebugNum',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: <span>边设备在线数  <br></br>(ROMA)</span>,
    dataIndex: 'ROMANum',
    key: 'ROMANum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: <span>边设备在线数  <br></br>(设备管理组件)</span>,
    dataIndex: 'devManageNum',
    key: 'devManageNum',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: "端设备建档数",
    dataIndex: 'endCreateNum',
    key: 'endCreateNum',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: "端设备在线数",
    dataIndex: 'endHaltNum',
    key: 'endHaltNum',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: "边设备建档数",
    dataIndex: 'edgeCreateNum',
    key: 'edgeCreateNum',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",

    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px", }} >APP指标</a>
      </Space>
    }
  },
];
const dataCity = [
  {
    key: '1',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '2',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '3',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '4',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '5',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '6',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '7',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '8',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '9',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
  {
    key: '10',
    city: "福州市",
    statisticalTime: '12731293812312',
    edgeDevType: "物联网卡",
    applicationRate: "42342342",
    noDebugNum: "2424324234",
    ROMANum: "中国移动",
    devManageNum: "192.168.0.1",
    endCreateNum: "192.168.0.1",
    endHaltNum: "否",
    edgeCreateNum: "否"
  },
];
export default function Infoboard() {
  const barRef = useRef()
  const lineRef = useRef()
  const [barChart, setBarChart] = useState(null)
  const [lineChart, setLineChart] = useState(null)
  useEffect(() => {
    setTimeout(function () {
      line()
      bar()
    }, 500)
  }, [])

  const bar = () => {
    var myChart
    if (!barChart) {
      myChart = echarts.init(barRef.current);
      setBarChart(myChart)
    } else {
      myChart = barChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',

        },
        valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '3%',
        bottom: '10%',
        top: "7%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',],
        axisTick: { show: false },
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      series: [
        {
          name: '管理单位物联体系建设应用率:',
          type: 'bar',
          data: [50, 34, 74, 80, 70, 90, 30, 20, 68, 56, 80, 70,],
          barWidth: "45%",
          itemStyle: {
            borderRadius: 5,
            width: 20,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 1, color: '#83bff6' }
            ])
          },
        }
      ]
    })
  }
  const line = () => {
    var myChart
    if (!lineChart) {
      myChart = echarts.init(lineRef.current);
      setLineChart(myChart)
    } else {
      myChart = lineChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',

        },
        valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '3%',
        bottom: '10%',
        top: "7%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: { show: false },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      series: [
        {
          name: '近七日物联体系建设应用率:',
          type: 'line',
          showSymbol: false,
          data: [90, 89, 87, 88, 89, 90, 92],
          lineStyle: {
            color: "#188df0"
          },
          areaStyle: {
            // shadowBlur: 20,  //阴影
            // origin: "start",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(126, 192, 247, 0.2)'
            },
            {
              offset: 0.5,
              color: 'white'
            }]) // 区域线条渐变色
          }
        }
      ]
    })
  }

  return (
    <div style={{ padding: '0 0 15px 0' }}>
      <div style={{ fontSize: "12px", background: "white", borderRadius: "5px" }}>
        <div style={{ padding: "15px", }}>
          <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>指标概览</span>
          <div style={{ float: "right" }}>


          </div>
        </div>
        <hr style={{ opacity: "0.4" }}></hr>
        <div style={{ display: "flex" }}>
          <div style={{ flex: "1 1 645px" }} >
            <div style={{ padding: "15px 0 0 22px", fontSize: "13px", fontWeight: "bold" }}>管理单位物联体系建设应用率</div>
            <div style={{ height: "320px" }} ref={barRef} ></div>
          </div>
          <div style={{ flex: "1 1 644px" }} >
            <div style={{ padding: "15px 0 0 22px" }}>
              <span style={{ fontSize: "13px", fontWeight: "bold" }}>近七日物联体系建设应用率</span>
              <div style={{ float: "right", padding: "0 15px" }}><Select
                defaultValue="全部"
                className='inputValue'
                options={[
                  {
                    value: '全部',
                    label: '全部',
                  },
                ]}
              /></div>
            </div>
            <div style={{ height: "310px" }} ref={lineRef}></div>
          </div>
        </div>

      </div >
      <div style={{ fontSize: "12px", background: "white", borderRadius: "5px", margin: "15px 0 0 0" }}>
        <div style={{ padding: "15px", }}>
          <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>指标详情</span>
        </div>
        <hr style={{ opacity: "0.4" }}></hr>
        <div style={{ padding: "20px 0 0 0" }}>
          <Space size={35} style={{ padding: "0 20px 0 30px" }}>
            <div>
              边缘设备类型 <Input placeholder="请输入" className='inputValue' />
            </div>
            <div>
              <span style={{ margin: "0 10px 0 0" }}>统计日期</span><DatePicker placeholder="请选择" style={{ fontSize: "12px" }} />
            </div>
            <div>
              <span style={{ margin: "0 10px 0 0" }}>统计时间点</span><TimePicker placeholder="请选择" format="HH" />
            </div>
          </Space>
          <Space size={10} style={{ float: "right", padding: "0 20px" }}>
            <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
            <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px" }}>重置</Button>
            <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>导出指标</Button>
          </Space>
          <div style={{ margin: "15px 20px" }}>
            <span style={{ fontWeight: "bold", fontSize: "14px" }}>地市指标</span>
            <Table
              columns={columnsCity} dataSource={dataCity} style={{ border: "1px solid #c9cacac7", margin: "15px 0 0 0", }}
              pagination={false}
              size='small'
              scroll={{ x: 1200 }}
            ></Table>
          </div>
        </div>
        <div style={{ padding: '0 0 10px 0' }}>
          <div style={{ margin: "0 20px", padding: "0 0 20x 0" }}>
            <span style={{ fontWeight: "bold", fontSize: "14px" }}>管理单位指标
              {/* <div style={{ color: "#1FBBA9", border: "1px solid #1FBBA9", padding: "0 3px", borderRadius: "3px", width: "21px" }}><BarChartOutlined /></div> */}
              <Image src={charts} style={{ color: "#1FBBA9", width: "16px", height: "16px", border: "1px solid #1FBBA9", borderRadius: "3px", padding: "2px 2px 1px 2px", margin: "0 0 0 3px" }}></Image>
            </span>
            <Table
              columns={columnsCity} dataSource={dataCity} style={{ border: "1px solid #c9cacac7", margin: "15px 0 0 0", }}
              pagination={false}
              size='small'
              scroll={{ x: 1200 }}
            ></Table>
          </div>
        </div>
      </div >

    </div>


  )
}
